<template>
  <div class="perception_user_all">
    <div class="el-card box-card is-hover-shadow" style="margin:5px 10px 0;padding: 0 10px">你已发布<i style="color: #fa0000;font-size: 20px;letter-spacing:2px">
      {{ count }} </i>篇文章，继续加油!</div>
    <div class="el-card box-card is-hover-shadow tool">
      <van-field v-model="search_value" placeholder="只搜索自己发布的文章" :border="false" @keyup.enter="search" />
      <van-icon name="search" size="30" style="float: right" @click="search"/>
    </div>
    <van-pull-refresh v-model="refresh_loading" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="200"
      >
        <el-card class="box-card"  v-for="item in allArray" :key="item.id" style="margin: 10px;" shadow="hover">
          <div @click="look(item)"  style="height: 150px;cursor: pointer;display: flex;flex-wrap: wrap;align-content: space-between">
            <div style="font-size: 18px;font-weight: 600;max-height: 48px;overflow: hidden" >
              {{item.title}}
            </div>
            <div class="suolue" v-text="item.body"></div>
            <el-row type="flex" justify="start" align="middle" class="gongneng">
              <div>{{item.time}}</div>
              <div>
                <van-icon name="eye-o" size="15" color="#858585" style="margin-right: 3px" />
                <span>{{ item.lll }}人浏览</span>
              </div>
              <div>
                <van-icon name="good-job-o" size="15" color="#858585" style="margin-right: 3px" />
                <span>{{ item.dz }}人点赞</span>
              </div>
              <el-tag type="success" v-if="item.overt==0" style="position: absolute;right:20px;top: 0;height: 20px;line-height: 20px;">公开</el-tag>
              <el-tag type="danger" v-else style="position: absolute;right:20px;top: 0;height: 20px;line-height: 20px;">私密</el-tag>
            </el-row>
          </div>
        </el-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getLikeMyArticle, getuserArticle, getuserArticleCount} from "../../utils/api";
import utils from "@/utils/time";
import qs from "qs";
export default {
  name: "PerceptionUserAll",
  created() {
    if(this.userid===""){
      this.$message({
        message: '当前账号异常，请重新登录！',
        type: 'warning'
      });
      this.$store.commit('setDlzt');
      this.$router.push('/login');
    }else{
      /*getuserArticle({userid:this.userid}).then(respose=>{
        console.log(respose)
      }).catch(error=>{
        console.log(error)
      })*/
      getuserArticleCount({userid:this.userid}).then(respose=>{
        if (respose.status==200){
          this.count = respose.body
        }else{
          this.count = 0
        }
      }).catch(error=>{
        console.log(error)
      })
    }

  },
  mounted() {

  },
  computed:{
    ...mapState([
        "userid"
    ])
  },
  data(){
    return {
      allArray:[],
      start:0,
      to:10,
      refresh_loading:false,
      refresh_time:0,
      loading:false,//是否处于加载状态，加载过程中不触发 load 事件
      finished:false,//是否已加载完成，加载完成后不再触发 load 事件
      count:"",
      search_value:'',
      search_flag:false
    }
  },
  methods:{
    onLoad(){
      if(this.search_flag && this.search_value){
        getLikeMyArticle(qs.stringify({main:this.search_value,start:this.start,to:this.to})).then(res=>{
          let newArray = res.body;
          newArray.forEach(v=>{
            v.body=v.body.replace(/<\/?.+?>/g, "").replace(/ /g, "").replace(/&nbsp;/ig, '')
                .replace(/&gt;/ig, '').replace(/&amp;/ig, '')
                .replace(/nbsp;/ig, '').replace(/&lt;/ig, '').substring(0, 350) + "...";
            v.time=utils.timestampToTime(v.time,3);
          })
          this.allArray=this.allArray.concat(newArray);
          this.start+=this.to;
          this.loading = false;
          if (newArray.length ===0) {
            // 如果拿到的新数组长度为0就说明没了
            this.finished = true;
          }
        }).catch(error=>{
          console.log(error);
        })
      }else {
        getuserArticle({userid:this.userid,start:this.start,to:this.to}).then(respose=>{
          let newArray = respose.body;
          newArray.forEach(v=>{
            v.body=v.body.replace(/<\/?.+?>/g, "").replace(/ /g, "").replace(/&nbsp;/ig, '')
                .replace(/&gt;/ig, '').replace(/&amp;/ig, '')
                .replace(/nbsp;/ig, '').replace(/&lt;/ig, '').substring(0, 350) + "...";
            v.time=utils.timestampToTime(v.time,3);
          })
          this.allArray=this.allArray.concat(newArray);
          this.start+=this.to;
          this.loading = false;
          if (newArray.length ===0) {
            // 如果拿到的新数组长度为0就说明没了
            this.finished = true;
          }
        }).catch(error=>{
          console.log(error);
        })
      }
    },
    onRefresh(){
      //当前时间减去上一次刷新的时间 是否大于1分钟 1000*60
      if(new Date().getTime()-this.refresh_time > 1000*60){
        //可以刷新
        this.start=0;
        this.to=10;
        this.finished = false;
        getuserArticle({userid:this.userid,start:this.start,to:this.to}).then(respose=> {
          let newArray = respose.body;
          newArray.forEach(v => {
            v.body = v.body.replace(/<\/?.+?>/g, "").replace(/ /g, "").replace(/&nbsp;/ig, '')
                .replace(/&gt;/ig, '').replace(/&amp;/ig, '')
                .replace(/nbsp;/ig, '').replace(/&lt;/ig, '').substring(0, 350) + "...";
            v.time = utils.timestampToTime(v.time, 3);
          })
          this.allArray = newArray;
          this.start += this.to;
        }).catch(error=>{
          console.log(error);
        })
        this.refresh_loading=false;
        this.$message.success("刷新成功")
        this.refresh_time=new Date().getTime();
      }else{
        //提示稍等1分钟后刷新
        this.$message.warning("请等待1分钟后再次尝试刷新")
        this.refresh_loading=false;
      }

    },
    look(v){
      this.$router.push({name:'perceptionlook',query:{id:v.id}}).catch(()=>{});
    },
    search() {
      if(this.search_value){
        this.start=0;
        this.to=10;
        getLikeMyArticle(qs.stringify({main:this.search_value,start:this.start,to:this.to})).then(res=>{
          let newArray = res.body;
          newArray.forEach(v=>{
            v.body=v.body.replace(/<\/?.+?>/g, "").replace(/ /g, "").replace(/&nbsp;/ig, '')
                .replace(/&gt;/ig, '').replace(/&amp;/ig, '')
                .replace(/nbsp;/ig, '').replace(/&lt;/ig, '').substring(0, 350) + "...";
            v.time=utils.timestampToTime(v.time,3);
          })
          this.allArray=newArray
          this.start+=this.to;
          this.loading = false;
          if (newArray.length ===0) {
            // 如果拿到的新数组长度为0就说明没了
            this.finished = true;
          }
          this.search_flag=true //下拉事件改为搜索
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
}
</script>

<style scoped>
.suolue{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
  min-height: 70px;
  max-height: 100px;
  line-height: 2;
  padding: 5px 0;
  text-indent: 2rem
}
.gongneng{
  min-width: 350px;
  width: 100%;
}
.gongneng>*{
  margin-right: 15px;
}
.tool{
  margin: 10px 10px 0;
  height: 40px;
  padding: 5px;
}
.tool>>>.van-cell{
  padding: 0;
  display: inline-block;
  width: calc(100% - 30px);
}
.tool>>>.van-field__control{
  height: 30px;
}
</style>
